import React, { ChangeEvent, Component } from 'react'
import {RouteComponentProps} from 'react-router-dom';
import {connect} from 'react-redux';
import {addComment} from '../../store/actions/detail';
import {bindActionCreators} from 'redux';
import {CommentProp} from '../../types/list.d';

interface Iprops extends RouteComponentProps{
    addComment:(comment:CommentProp) => void
}

interface Istate{
    con:string
}

class Comment extends Component<Iprops,Istate> {
    state = {
        con:''
    }
    render() {
        let {con} = this.state;
        return (
            <div>
                <input type="text" value={con} onChange={this.change}/>
                <button onClick={this.publish}>发表</button>
            </div>
        )
    }

    change = (e:ChangeEvent) => {
        this.setState({
            con:(e.target as HTMLInputElement).value
        })
    }

    //发表
    publish = () => {
        this.props.addComment({
            id:new Date().getTime(),
            time:new Date()+'',
            con:this.state.con
        })
        this.props.history.go(-1);
    }
}

let stateMapToProps = () => {
    return {}
}

let dispatchMapToProps = (dispatch:any) => {
    return bindActionCreators({addComment},dispatch)
}

export default connect(stateMapToProps,dispatchMapToProps)(Comment)